<template>
  <div class="page">
    <div class="scroll-view">
      <customHeader @leftCallBack="goBack" middleTitle="活动创建"/>
      <div class="page-body">
        <ul class="ul-list" v-for="(item,index) in list" :key="index">
          <li @click="handleCreate(item)">
						<div class="ul-list-icon"></div>
						<p>{{item.name}}</p>
						<p class="ul-list-label">{{item.label}}</p>
					</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from 'mint-ui';
import customHeader from "@/components/header/header";

export default {
	components: {
    customHeader
  },
	data() {
		return {
			list: [{
				id: 1, name: '满减券', label: '提升客单价'
			},{
				id: 2, name: '消费赠券', label: '提升客单价'
			},{
				id: 3, name: '拉新券', label: '提升客单价'
			},{
				id: 4, name: '引流券', label: '提升客单价'
			}]
		}
	},
	methods: {
    goBack() {
      if(this.$route.query.stack) {
        this.$router.go(-2);
      }else {
        this.$router.back();
      }
    },
		handleCreate(item) {
			this.$router.push({
				path: '/couponMarketing/couponEdit',
				query: item
			})
		}
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/public";
.ul-list {
	@include remCalc(margin-left, -5);
	li {
		float: left;
		color: #333;
		background-color: #fff;
		border: 1px solid #ddd;
		text-align: center;
		box-sizing: border-box;
		@include remCalc(border-radius, 4);
		@include remCalc(font-size, 32);
		@include remCalc(width, 220);
		@include remCalc(height, 300);
		@include remCalc(margin-top, 20);
		@include remCalc(margin-left, 25);
	}
	&-icon {
		border-radius: 50%;
		@include remCalc(width, 168);
		@include remCalc(height, 168);
		@include remCalc(margin, 20, 25, 10);
		display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
  }
  &:nth-of-type(1) .ul-list-icon {
    background-image: url('../../../static/images/ticket_mj.png')
  }
  &:nth-of-type(2) .ul-list-icon {
    background-image: url('../../../static/images/ticket_xfz.png')
  }
  &:nth-of-type(3) .ul-list-icon {
    background-image: url('../../../static/images/ticket_lx.png')
  }
  &:nth-of-type(4) .ul-list-icon {
    background-image: url('../../../static/images/ticket_yl.png')
  }
	&-label {
		color: #666;
		@include remCalc(font-size, 24);
		@include remCalc(margin-top, 10);
	}
}
</style>